<template>
    <div class='indexartwrap' ref='indexartwrap2'>
        <div>
            <!-- 轮播图 -->
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
                <van-swipe-item v-for='(item,index) in arr3' :key='index'>
                    <img :src="item" alt="">
                </van-swipe-item>
                
            </van-swipe>

            <!-- 闪购 -->
            <ul class='ul1'>
                <li v-for='(item,index) in arr1' :key='index' >
                    <div>
                        <img :src="item.img" alt="">
                        
                            
                        
                    </div>
                    <span>{{item.title}}</span>
                </li>
                
            </ul>


            <!-- 限时抢 -->
            <section>
                <img :src='img7' alt="">
            </section>
            <p class='p1'>
                限时抢
                <span>更多&gt;</span>
            </p>
            


            <!-- 轮播图2 -->
            <van-swipe class="my-swipe2"  indicator-color="red" :autoplay="3000" >
                <van-swipe-item v-for='(item,index) in 3' :key='index'>
                    <img :src="img9" alt="">
                    <span class='a'>层层换肤</span>
                    <span class='b'>澳容大金瓶24K纳米黄金精华液</span>
                    <span class='c'>闪购价 
                        <strong>￥89.9</strong>
                    </span>
                    <span class='d'>马上抢</span>
                    <span class='e'>已售5%</span>
                </van-swipe-item>
                
            </van-swipe>
            <!-- 好物优选 -->
            <p class='p2'>
                好物推荐       
            </p>

            <div class="imgdiv">
                <img :src='img8' alt="">
            </div>
            <!-- 最恶心的轮播图 -->
            <div class='p3'>
                    <span>本周推荐</span>
                    <div class="huang">
                        <div class="swiper-pagination" slot="pagination"></div>
                    </div>
                    
                   
            </div>
            

            <!-- <van-swipe class='myswipe' :loop="false" :width="350" @change="onChange" :show-indicators="false">
                <van-swipe-item v-for='(item,index) in 3' :key='index'>
                    <div class='bbb'>
                        <img :src="swip" alt="">
                        <span>高温蒸汽电动拖把，你见过吗？</span>
                        <div class='zzz'>
                            <img :src="eye" alt="">
                            5986
                        </div>
                    </div>
                    
                </van-swipe-item>
                
            </van-swipe> -->
            <div class="swiper-container" >
                <swiper ref="mySwiper" :options="swiperOptions" >
                    <div class="swiper-slide" v-for="(item, index) in 3" :key="index" >
                        <img :src="swip" alt="">
                        <span>高温蒸汽电动拖把，你见过吗？</span>
                        <div class='zzz'>
                            <img :src="eye" alt="">
                            5986
                        </div>
                    </div>
                    
                </swiper>
            </div>
            
            <!-- 好货 -->
            <p class='p4'>
                好物优选
                <span>更多&gt;</span>
            </p>
            
            <goodchoose />

            <!-- 新品 -->
            <p class='p4'>
                新品上市
                <span>更多&gt;</span>
            </p>
            <ul class='ul2'>
                <li v-for='(item,index) in 9' :key='index'>
                    <img :src="img11" alt="">
                    <span>softTech云柔系列澳享舒睡羊毛被</span>
                    <div class='ul2div'>
                        <strong>活动</strong>
                        <span class='divspan'>￥299</span>
                        <i class='divi'>￥599</i>
                    </div>
                </li>
            </ul>
            <!-- 美妆 -->
            <beauty />




            <!-- 这些新品最热卖 -->
            <p class='p2'>
                这些商品最热卖       
            </p>
            <ul class='ul4'>
                <li v-for='(item,index) in 10' :key='index'>
            

                    <img :src="img11" alt="">
                    <span>Conch便携式彩胶防晒伞-蝴蝶款</span>
                    <div class='ul4div'>
                        <strong>活动</strong>
                        <span class='div4span'>￥299</span>
                        <i class='div4i'>￥599</i>
                    </div>
                </li>
            </ul>
            
        </div>
        

    </div>
</template>

<script>
import goodchoose from './goodchoose.vue'
import beauty from './beauty.vue'
import img1 from '@/assets/imgindex/NEW.png'
import img2 from '@/assets/imgindex/thunder.png'
import img3 from '@/assets/imgindex/ping.png'
import img4 from '@/assets/imgindex/money.png'
import img5 from '@/assets/imgindex/icon.png'
import img6 from '@/assets/imgindex/1.png'
import img7 from '@/assets/imgindex/go.png'
import img8 from '@/assets/imgindex/3.png'
import img9 from '@/assets/imgindex/2.png'
import img10 from '@/assets/imgindex/5.png'
import img11 from '@/assets/imgindex/6.png'
import swip from '@/assets/imgindex/7.png'
import eye from '@/assets/imgindex/eye.png'
import BScroll from 'better-scroll'
export default {
    data() {
        return {
            arr1:[{title:'新品',img:img1},{title:'闪购',img:img2},{title:'拼团',img:img3},{title:'领券',img:img4},{title:'门店',img:img5}],
            arr3:[img6,'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598974616372&di=4ea88027d11cedf2a3ba59f7db13ba1c&imgtype=0&src=http%3A%2F%2Fimg3.winshang.com%2FUpload%2Fbrand%2F2017%2F5%2F25%2F131401528234228352.png','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598974616370&di=5f9e6876c9da7dc3a4e0ae4a3b029825&imgtype=0&src=http%3A%2F%2Fimg3.winshang.com%2FUpload%2Fbrand%2F2017%2F5%2F25%2F131401528791735488.png'],
            img7:img7,
            img8,
            img9,
            current:0,
            img10,
            img11,
            swip,
            eye,
            swiperOptions: {
                lidesPerView: 'auto',
                centeredSlides: true,
                watchSlidesProgress: true,
                paginationClickable: true,
                slidesPerView: 1.1,
                spaceBetween: 10,
                loop: false,
                autoplay: false,
                pagination: {
                    el: '.swiper-pagination',
                    type: 'fraction',
                }
            },
            scrolly:''      
        }
    },
    mounted(){
        
	    // this.scroll = new BScroll(this.$refs.indexartwrap2)
        
        this.$nextTick(()=>{
            // let scroll = new BScroll (".indexartwrap",res=>{
            //     console.log(1)
            // })
            // function onScroll(pos){
            //     console.log(pos)
            // }
            let scroll = new BScroll(".indexartwrap", {
                // 滚动部分允许点击
                click: true,
                // 允许上拉加载
                pullUpLoad: true,
            });
            // console.log(scroll)
            //最后要做防抖！！！！！！
            scroll.on("scroll", (pos) => {
                // console.log(pos.y)
                this.scrolly=pos.y
                
            })
        })
        
    },
    methods: {
        onChange(index) {
            this.current = index;
        },
        move(i){
            this.current=i
        }
    },
    components:{
        goodchoose,
        beauty
    }
}
</script>

<style lang='stylus'>
    .indexartwrap{
        position absolute
        top 89px
        left 0
        right 0
        bottom 50px
        overflow hidden
        div{
            .my-swipe .van-swipe-item {
            color: #fff;
            font-size: 20px;
            line-height: 150px;
            text-align: center;
            
            width 375px
            height 209px
            img{
                width 100%
                height 100%
            }
            }
            .ul1{
                display flex 
                margin-top 14px          
                li{
                    width 99px
                    display flex
                    flex-direction column
                    justify-content space-between
                    align-items center
                    div{
                        width 45px
                        height 45px
                        border-radius 50% 
                                          
                        img{
                            width 100%
                            height 100%
                        }
                        
                    }
                    span{
                        
                        font-size: 10px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #1A1A1A;
                        margin-top 11px
                    }
                }
            }
            section{
                margin-top 28px
                width 100%
                height 119px
                img{
                    width 100%
                    height 100%
                }
                
            }
            .p1{
                    width 100%
                    display flex
                    align-items flex-end
                    margin-left 14px
                    font-size: 16px;
                    font-family: PingFang SC;
                    font-weight: 700;
                    color: #1B1B1B;
                    margin-top 22px
                    margin-bottom 21px
                    span{
                        margin-left 270px                        
                        font-size: 12px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #9A9A9A;
                    }
                }
            .my-swipe2{
                .van-swipe__track {
                height 172px
                width 100%
                background-color #fff
                .van-swipe-item{
                    position relative
                    img{
                        width 58px
                        height 142px
                        margin-left 72px
                        margin-top 18px
                    }
                    .a{
                            position  absolute
                            top 33px
                            left 197px
                            font-size: 17px;
                            font-family: PingFang SC;
                            font-weight: bold;
                            color: #343434;
                    }
                    .b{
                        position absolute
                        top 57px
                        left 197px
                        
                        font-size: 10px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #9A9A9A;
                    }
                    .c{
                        position absolute
                        top 80px
                        left 197px
                        
                        font-size: 10px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #9A9A9A;
                        strong{
                            color red
                        }
                    }
                    .d{
                        width 74px
                        height 23px
                        background red
                        position absolute
                        top 97px
                        left 197px
                        font-size 15px
                        color #fff
                        display flex
                        justify-content center
                        align-items center
                    }
                    .e{
                        position absolute
                        top 128px
                        left 197px
                        
                        font-size: 12px;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #9A9A9A;
                    }

                }
                
                
                }
            }
            
            .p2{
                margin-top 21px
                margin-left 14px
                    
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: 700;
                color: #1B1B1B;
            } 
            .imgdiv{
                margin-top 12px
                height 240px
                width 100%
                img{
                    width 100%
                    height 100%
                    transform scale(1.02)
                }
            }
            .p3{
                margin-top 25px
                margin-left 14px
                margin-bottom 14px
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: 700;
                
                color: #1B1B1B;
                display flex
                align-items center
                .huang{
                    position relative
                    display flex
                    justify-content center
                    align-item center
                    margin-top 35px
                    .swiper-pagination{
                        display flex
                        margin-left 240px
                        
                        font-size: 12px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #595959;
                    }
                    
                }
                
            }
            
            .p4{
                width 100%
                display flex
                align-items flex-end
                margin-left 14px
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: 700;
                color: #1B1B1B;
                margin-top 22px
                margin-bottom 21px
                span{
                        margin-left 250px                        
                        font-size: 12px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #9A9A9A;
                    }
            }
            .ul2{
                display flex
                flex-wrap wrap
                li{
                    width 33%
                    display flex
                    flex-direction column
                    justify-content center
                    align-items center
                    margin-bottom 10px
                    img{
                        width 117px
                        height 117px
                    }
                    span{
                        
                        width 110px
                        height 22px
                        font-size: 10px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #333333;
                        line-height: 12px;
                    }
                    .ul2div{
                        margin-top 10px
                        width 110px
                        height 18px
                        display flex
                        justify-content flex-start
                        align-items center
                        strong{
                            width 24px
                            height 13px
                            background #BB2742
                            color #fff
                            line-height 13px
                            text-align center
                            font-size 8px
                        }
                        .divspan{
                            width 33px
                            display flex
                            justify-content center
                            align-items center
                            font-size: 11px;
                            font-family: PingFang SC;
                            font-weight: bold;
                            color: #BB2742;
                            
                        }
                        .divi{
                            text-decoration line-through
                            font-size: 9px;
                            font-family: PingFang SC;
                            font-weight: bold;
                            color: #999999;
                            
                        }
                    }
                }
            }
            

            .ul4{
                
                display flex
                flex-wrap wrap
                margin-top 14px
                border-top 1px #F0F0F0 solid
                border-bottom 1px #F0F0F0 solid
                li{
                    width 50%
                    border-top 1px #F0F0F0 solid
                    border-right 1px #F0F0F0 solid
                    display flex
                    flex-direction column
                    justify-content center
                    align-items center
                    
                    img{
                        width 176px
                        height 176px
                        margin-top 5px
                    }
                    span{
                        
                        width 160px
                        height 22px
                        font-size: 10px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #343434;
                        line-height: 12px;
                    }
                    .ul4div{
                        
                        width 160px
                        height 18px
                        display flex
                        justify-content flex-start
                        align-items center
                        margin-bottom 5px
                        strong{
                            width 24px
                            height 13px
                            background #BB2742
                            color #fff
                            line-height 13px
                            text-align center
                            font-size 8px
                        }
                        .div4span{
                            width 33px
                            display flex
                            justify-content center
                            align-items center
                            font-size: 11px;
                            font-family: PingFang SC;
                            font-weight: bold;
                            color: #BB2742;
                            
                        }
                        .div4i{
                            text-decoration line-through
                            font-size: 9px;
                            font-family: PingFang SC;
                            font-weight: bold;
                            color: #999999;
                            
                        }
                    }
                }
                li:nth-child(1){
                    border-top none
                }
                li:nth-child(2){
                    border-top none
                }
                li:nth-child(2n){
                    border-right none
                }

            }
            .swiper-container {
               
                font-size: 20px;
                line-height: 150px;
                text-align: center;
                height 240px
                .swiper-wrapper{
                    display flex                   
                    height 100%
                    position relative
                    .swiper-slide {
                    
                            height 100%
                            
                            dispaly flex
                            justify-content center
                            align-items center
                            position relative
                            
                            img{
                                width 100%
                                height 192px
                            }
                            span{                               
                                font-size: 12px;
                                font-family: PingFang SC;
                                font-weight: 500;
                                color: #666666;
                                line-height: 10px;
                                display flex
                                justify-content flex-start
                                margin-top 5px
                                position absolute
                                bottom 35px
                                left 0px
                            }
                            .zzz{
                                margin-top 5px
                                height 20px
                                display flex
                                justify-content flex-start
                                font-size: 9px;
                                font-family: PingFang SC;
                                font-weight: 500;
                                color: #666666;
                                line-height: 10px;
                                position absolute
                                bottom 5px
                                left 0px
                                img{
                                    width 12px
                                    height 9px
                                    margin-right 5px
                                }
                            }
                        
                        
                    }
                    
                }
                
            }
            

        }
        
    }
</style>
